<!-- 法律条款详情页 -->
<template>
	<view>
		<u-parse :html="content" :selectable="true" :use-cache="true"></u-parse>
		<!-- 顶部的搜索组件 -->
		<!-- <search @change="searchChange"></search> -->
		<!-- 法律条款数据项 -->
		<!-- <view class="law-item law-item-one">
			<view class="text">【发布部门】 {{lawData.department}}</view>
			<view class="text">【发布日期】 {{lawData.depTime}}</view>
			<view class="text">【实施日期】 {{lawData.impTime}}</view>
		</view>
		<view class="law-item">
			<view class="text"><text :user-select="true">{{ lawData.content }}</text></view>
		</view>
		<view class="law-item">
			<view class="text">{{ lawData.time }}</view>
		</view> -->
		<!-- 应该是循环渲染出每章法律条款的内容 -->
		<!-- <block v-for="(lawItem, i1) in lawData.lawDataList" :key="i1"> -->
			<!-- 章名 -->
			<!-- <view class="law-item"><view class="law-order">{{lawItem.title}}</view></view> -->
			<!-- 小节 -->
			<!-- <view class="law-item" v-for="(order, i2) in lawItem.orders" :key="i2">
				<view class="text">
					<text :user-select="true" class="text-title">{{order.title}}</text>
					<text :user-select="true">{{order.content}}</text>
				</view>
			</view>
			
		</block> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			lawData: {},
			content: '', 	// 此页面的富文本内容，整个页面都是富文本
		};
	},
	// 接收页面传递过来的参数
	onLoad(options) {
		this.getData(options.id)
	},
	methods: {
		// 获取法律大全内容详情
		async getData(id) {
			const res = await this.$u.api.getLegalContent({id: id})
			if(!res) return
			this.content = res.content
		},
		// 监听顶部搜索框的输入事件
		searchChange(keyWord) {
			console.log(keyWord);
		}
	}
};
</script>

<style lang="scss" scoped>
.law-item {
	padding: 20rpx;
	border-bottom: 1px solid #999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #141418;
	font-family: $u-font-family;
	font-weight: 500;
	.text {
		font-size: 28rpx;
	}
}
.law-item-one {
	border-top: 1px solid #999;
	.text {
		font-size: 22rpx;
	}
}
.law-order {
	font-size: 34rpx;
	font-weight: 700;
}
.text-title {
	font-size: 28rpx;
	color: $u-text-color;
	margin-right: 1em;
}
</style>
